<template>
  <div class="table_container" v-resize="aaa">
    <!-- 目标专利 -->

    <wTable
      @handleScroll="handleScroll1"
      :column="column"
      :trLength="trLength"
      :tableDataMap="tableDataMap"
      class="position_div"
      ref="position_div"
      :td_width="overSecWidth"
      :style="{
        '--tableWidth': Math.max(parseFloat(overSecWidth), 420) + 104 + 'px',
      }"
    >
      <template #target="{ data }">
        <div class="cell_left">
          <span>{{ data.left.pnNumber }}</span>
          <span>{{ data.left.label }}</span>
        </div>
        <div class="cell_right">
          <span>{{ data.right.label }}:</span
          ><span>{{ data.right.pnNumber }}</span>
        </div>
      </template>
    </wTable>
    <wTable
      @handleScroll="handleScroll"
      :column="column"
      :trLength="trLength"
      :tableDataMap="tableDataMap"
      class="singTable"
      ref="singTable"
      :td_width="overSecWidth"
    ></wTable>
  </div>
</template>

<script>
import emptyVue from "./tableComponent/empty.vue";
import wTable from "./w_table.vue";
import Vue from "vue";
export default {
  props: ["column", "trLength", "tableDataMap"],
  components: {
    wTable,
  },
  data() {
    return {
      aaa: 0,
      overSecWidth: 0,
    };
  },
  watch: {
    aaa: {
      handler(val) {
        this.handleOverSecWidth(val);
        this.addNew();
      },
    },
  },
  mounted() {},
  methods: {
    handleOverSecWidth(val) {
      this.overSecWidth = (val - 104) / (this.column.length - 1) - 8 + "px";
    },
    handleScroll() {
      let target = this.$refs.singTable.$el.querySelector(".table_body");
      let follow = this.$refs.position_div.$el.querySelector(".table_body");
      let header = this.$refs.singTable.$el.querySelector(".table_header");
      follow.scrollTop = target.scrollTop;
      header.scrollLeft = target.scrollLeft;
    },
    handleScroll1() {
      let target = this.$refs.position_div.$el.querySelector(".table_body");
      let follow = this.$refs.singTable.$el.querySelector(".table_body");
      follow.scrollTop = target.scrollTop;
    },

    async addNew() {
      this.handleOverSecWidth(this.aaa);
      await this.$nextTick();
      //删除所有的
      let emptyList = this.$refs.singTable.$el.querySelectorAll(".emptyDom");
      emptyList.forEach((item) => {
        item.remove();
      });
      //重新创建空的dom
      let domList =
        this.$refs.singTable.$el.querySelectorAll("[isempty='true']");
      domList.forEach((item, index) => {
        this.addEmptyDom(item, index == 0);
      });
    },
    async addEmptyDom(dom, addBorder) {
      await this.$nextTick();
      let div = document.createElement("div");
      let table_body = this.$refs.singTable.$el.querySelector(".table_body");
      //为了创建一个和table_body 一样大的dom 盒子覆盖在原来的tbody上
      div.classList.add("emptyDom");
      div.setStyle({
        width: table_body.scrollWidth + "px",
        height: table_body.scrollHeight - 8 + "px",
        position: "absolute",
        left: 0,
        top: 0,
        pointerEvents: "none",
        overflow: "hidden",
      });
      //内部
      let instance = Vue.extend(emptyVue);
      let style = {
        width: Math.max(parseFloat(this.overSecWidth), 420) + "px",
        left: dom.offsetLeft - 2 + "px",
      };
      if (!addBorder) {
        style.borderLeft = "1px solid rgba(0, 0, 0, 0.08)";
      }
      let component = new instance({
        propsData: {
          style: style,
        },
      }).$mount();
      div.appendChild(component.$el);
      table_body.appendChild(div);

      table_body.scrollLeft = table_body.scrollWidth;
    },
  },
};
</script>
<style scoped lang="less">
div {
  box-sizing: border-box;
}
.table_container {
  position: relative;
  height: 100%;
  width: 100%;
}
.singTable,
.position_div {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

// 定位
/deep/ .position_div {
  position: absolute;
  left: 0;
  top: 0;
  overflow-x: auto;
  overflow-y: auto;
  width: var(--tableWidth);
  max-height: calc(100% - 8px);
  border: none;
  z-index: 10;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
/deep/ .singTable {
  background-color: #f5f5f5;
  .table_header {
    .header_td {
      background-color: #f5f5f5;
    }
    & > div:nth-of-type(-n + 2) {
      visibility: hidden;
    }
  }
  .table_body {
    position: relative;
    & .common_tr:nth-of-type(n + 1) .common_td:nth-of-type(1) {
      visibility: hidden;
    }
    & .common_tr:nth-of-type(n + 1) .common_td:nth-of-type(2) {
      visibility: hidden;
    }
  }
}
/deep/ .position_div {
  .table_header {
    height: 48px;
    pointer-events: none;
    padding-right: 0;
    .common_td:nth-of-type(-n + 2) {
      background-color: #f5f5f5;
      pointer-events: auto;
    }
    .common_td:nth-of-type(n + 3) {
      visibility: hidden;
    }
  }
  .table_body {
    pointer-events: none;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .common_tr .common_td:nth-of-type(-n + 2) {
      background-color: #f5f5f5;
      pointer-events: auto;
    }
    .common_tr .common_td:nth-of-type(n + 3) {
      visibility: hidden;
    }
  }
  // .common_td:nth-of-type(n + 2) {
  //   flex-shrink: 0;
  // }
  .common_td:nth-of-type(n + 3) {
    // width: 0;
    // min-width: 0;
    // flex-grow: 0;
    // padding: 0;
    // overflow: hidden;
  }
}
.cell_left {
  font-weight: 600;
  span:nth-of-type(1) {
    margin-right: 8px;
    color: #1c4cba;
  }
  span:nth-of-type(2) {
    color: #626262;
  }
}
</style>
